<template>
    <div id="test" class="m-flex m-f-column --m-ai-center">
        <h1>Test</h1>
        <div class="test test-timeline --m-w100">
            <m-timeline></m-timeline>
        </div>
        <div class="test test-comment">
            <m-comment @onSave="onCommentSave"></m-comment>
            <m-comment-area :data="comments"></m-comment-area>
        </div>
        <div class="test test-link">
            <m-link type="default" to="www.baidu.com">哈哈哈</m-link>
            <m-link type="success" to="www.baidu.com">哈哈哈</m-link>
            <m-link type="warning" to="www.baidu.com">哈哈哈</m-link>
            <m-link type="danger" to="www.baidu.com">哈哈哈</m-link>
            <m-link type="primary" to="www.baidu.com">哈哈哈</m-link>
            <m-link type="disabled" to="www.baidu.com">哈哈哈</m-link>
        </div>
        <button @click="add">添加用户</button>
        <div class="test test-upload" v-guide="1">
            <m-upload></m-upload>
        </div>
        <div class="test test-switch">
            <m-switch @switch="onSwitch"></m-switch>
        </div>
        <div class="test test-svg" v-guide="2">
            <SvgIcon name="lift" color="red"></SvgIcon>
        </div>
        <div class="test test-btn m-flex">
            <m-button type="primary" text="2222" round></m-button>
            <m-button type="danger">哈哈哈</m-button>
            <m-button type="warning">哈哈哈</m-button>
            <m-button type="success">哈哈哈</m-button>
            <m-button type="info">哈哈哈</m-button>
            <m-button type="disabled"></m-button>
            <m-button type="link"></m-button>
            <m-button type="default"></m-button>
        </div>
        <div class="test test-dialog">
            <m-button @click="openDialog">打开对话框</m-button>
            <m-dialog v-if="dialog" v-model="dialog"></m-dialog>
        </div>
        <div class="test test-input">
            <m-input></m-input>
        </div>
        <m-transition name="backInUp" toggle>
            <m-backTop></m-backTop>
        </m-transition>
        <div class="test test-card --m-w100">
            <m-card hoverable>
                <template #title>
                    <div>标题</div>
                </template>
                <div>内容</div>
            </m-card>
        </div>
        <div class="test test-divider">
            <m-divider></m-divider>
        </div>
        <div class="test test-ellipsis">
            <m-ellipsis :limit="2" width="100">
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            </m-ellipsis>
        </div>
        <div class="test test-animate">
            <m-button type="primary" :class="{ 'animate__animated animate__wobble': animate }" @click="onLoding"></m-button>
            <m-transition name="slideInLeft" toggle :duration="{ enter: 1000, leave: 1000 }">
                <h2 v-if="animate" key="13" class="2">动画效果13</h2>
                <h2 v-if="!animate" key="12">动画效果12</h2>
            </m-transition>
        </div>
        <div class="test test-toolbox">
            <m-tool-box>
                <m-switch @switch="onSwitch"></m-switch>
            </m-tool-box>
        </div>
        <div class="test test-waterfall">
            <!-- <v-waterfall :items="waterfallData">
                <template name="item" v-slot:item="{ item }" >
                    <m-transition name="zoomInUp" toggle :duration="{ enter: 1000, leave: 1000 }">
                        <m-card v-if="!animate" class="m-flex m-f-column"  hoverable>
                            <div class="img" style="width: 100%;">
                                <img :src="getImageUrl(item.imgSrc)" style="width: 100%;" />
                            </div>
                            <div class="title">
                                <h3>{{ item.title }}</h3>
                            </div>
                            <div class="desc">
                                <p>{{ item.desc }}</p>
                            </div>
                            <div class="date">
                                {{ item.date }}
                            </div>
                            <div class="others m-flex">
                                <div class="m-flex --m-ai-center --m-jc-center">
                                    <img :src="getImageUrl(item.imgSrc)" width="30" height="30"
                                        style="border-radius: 50%;" />
                                    <span>{{ item.author }}</span>
                                </div>
                                <div class="m-flex --m-ai-center --m-jc-center">
                                    <svg-icon name="lift"></svg-icon>
                                    <span>{{ item.like }}</span>
                                </div>
                                <span>{{ item.read }}</span>
                                <span>{{ item.comment }}</span>
                            </div>
                        </m-card>
                    </m-transition>
                </template>
            </v-waterfall> -->
        </div>
        <!-- <div class="waterfall">
            <div class="waterfall-item" v-for="(item, index) in waterfallData" :key="index">
                <img :src="item.imgSrc" />
            </div>
        </div> -->
        <m-waterfall :data="waterfallData" :column="5">
            <template name="item" v-slot:item="{ item }">
                <img :src="item.imgSrc" style="width: 100%;height: 100%;">
            </template>
        </m-waterfall>
    </div>
</template>

<script setup lang="ts">
// import { useRepoStore } from '@/store';
import { onMounted, ref } from 'vue';
import { waterfallData } from '@/mock/waterfall';
import request from '@/http';
import { restAdd } from '@/apis/rest';
import { getCommentsByPage } from '@/apis/comment';
// import Waterfall from '@/utils/waterfall';
const dialog = ref(false);
const animate = ref(false);
const openDialog = () => {
    dialog.value = !dialog.value;
}
const onLoding = () => {
    animate.value = !animate.value;
}
const onSwitch = (_val: boolean, status: boolean) => {
    if (status) {
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
    }
}
const onCommentSave = (form: any) => {
    restAdd('comment', form).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
}
const add = () => {
    const user = {
        username: 'admin' + Math.random(),
        password: "123456",
        email: "213123@qq.com",
        role: 'user',
        status: 'normal',
        phone: '18150943586',
        avatar: 'https://avatars.githubusercontent.com/u/38139389?v=4',
        token: ''
    }
    request.post('/rest/user/add', user).then(res => {
        console.log(res);
    })
}
const comments = await getCommentsByPage({
    page: '/test'
});

onMounted(async () => {
    // new Waterfall({
    //     el: '.waterfall',
    //     column: 4,
    //     gap: 10,
    // })
})
// const repo = useRepoStore();
// repo.getAndSetRepoCommits().then(() => {
//     console.log(repo.repoCommits);
// });

</script>

<style lang="less" scoped>
.waterfall {
    width: 100%;
    // width: 960px;
    margin: 0 auto;
    position: relative;

    .waterfall-item {
        position: absolute;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

#test {
    width: 100%;
    min-height: 2500px;
    margin: 90px auto;
    overflow: hidden;

    .test {
        margin: 20px 0;
    }

    .test-btn {
        .m-button {
            margin-right: 10px;
        }
    }

    .test-divider {
        width: 100%;

    }

    .test-comment {
        width: 80%;
    }
}
</style>